<template>
  <base-dialog
    title="角色配置"
    ref="baseDialog"
    @handleClose="handleClose"
    @handleSubmit="handleSubmit"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="账号" prop="username">
        <el-input
          disabled
          v-model="form.username"
          placeholder="请输入账号"
          show-word-limit
          clearable
          :maxlength="20"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="nickname">
        <el-input
          disabled
          v-model="form.nickname"
          placeholder="请输入姓名"
          show-word-limit
          clearable
          :maxlength="8"
        />
      </el-form-item>
      <el-form-item label="角色" prop="roles">
        <avue-select
          v-model="form.roles"
          multiple
          placeholder="请选择角色"
          :dic="roleListData"
          :props="roleProps"
        ></avue-select>
      </el-form-item>
    </el-form>
  </base-dialog>
</template>

<script>
import { assignRoles } from "@/api/system/user"
import { roleList } from "@/api/system/role"
export default {
  data() {
    return {
      form: {},
      rules: {
        roles: [{ required: true, message: "请选择角色", trigger: "blur" }]
      },
      roleProps: {
        label: "roleName",
        value: "id"
      },
      //角色
      roleListData: []
    }
  },
  methods: {
    init(item) {
      this.$refs.baseDialog.dialogVisible = true
      this.form = JSON.parse(JSON.stringify(item))
      this.form.roles = item.roles.map((e) => e.id)
      roleList().then((res) => {
        this.roleListData = res.data
      })
    },
    handleClose() {
      this.form = {}
      this.$refs.baseDialog.dialogVisible = false
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const data = {
            id: this.form.id,
            roles: this.form.roles
          }
          await assignRoles(data)
          this.$message({
            type: "success",
            message: "角色配置成功"
          })
          this.$emit("updatePage")
          this.handleClose()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .disUoloadSty .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
.el-select {
  width: 100%;
}
</style>
